import React, {Component} from 'react';
import {hashHistory,Link} from 'react-router';
import { connect } from 'react-redux';
import PropTypes from 'prop-types'
import { Menu, Icon } from 'antd';


const SubMenu = Menu.SubMenu;


class NavMenu extends React.Component {
  constructor(props){
    super(props);
  }
  
  componentDidMount = () => {
    // console.log("menu", this.props.menus)
  }
  //   选中菜单的key
  chooseMenu = (e) => {
    this.props.changeMenu(e.key);
  }
  
  render() {
    let _top = data => data.map((item) => {
        return (
            <Menu.Item key={item.key}>
                {item.url?
                    <Link to={item.url}>
                        <span>{item.text}</span>
                    </Link>:
                    <span>{item.text}</span>
                }
            </Menu.Item> 
        )
    })
    
    return (
        <Menu
            // theme='dark'
            mode="horizontal"
            selectedKeys={[this.props.currentKey]}
            style={{ lineHeight: '64px', fontSize:14, fontWeight:'bold' }}
            onClick={this.chooseMenu}
        >
            {_top(this.props.menus)}
        </Menu>
    );
  }
}

NavMenu.PropTypes = {
    changeMenu: PropTypes.func.isRequired,
    menus: PropTypes.array.isRequired
}

export default connect()(NavMenu);